<template>
	<view class="cancelAfter" style="background: url('/static/imgs/index/cancelBGC.png') no-repeat center;
	background-size: cover;">

		<view class="ca-take">
			<input type="text" v-model="value" maxlength="6" placeholder="请输入提货码" placeholder-class="p-input" />
		</view>

		<view class="ca-footer">
			<button type="default" size="mini" class="cancel" @click="cancel()">取消</button>
			<button type="default" size="mini" class="confirm" @click="confirm('QSPopup2')">确认</button>
		</view>
		<!-- 弹窗1 -->
		<QSPopup ref="QSPopup1" type="fadeInUp">
			<view class="check failed">
				<view class="line1">
					提货码核对失败！
				</view>
				<view class="line2">
					{{errMsg}}
				</view>
				<button type="primary" @click="onFailed">确认</button>
			</view>
		</QSPopup>
		<!-- 弹窗2 -->
		<QSPopup ref="QSPopup2" type="fadeInUp">
			<view class="check failed">
				<view class="line3">
					提货码核对成功！
				</view>
				
				<button type="primary" @click="onConfirm" class="confirmButtom">确认</button>
			</view>
		</QSPopup>
	</view>
</template>

<script>
	import QSPopup from '@/components/QS-popup/QS-popup.vue';
	export default {
		components: {
			QSPopup
		},
		
		data() {
			return {
				value: '',
				errMsg: '请重新输入提货码！'
			};
		},
		methods: {
			// 核对失败的弹窗中的确定按钮
			onFailed() {
				this.$refs['QSPopup1'].hide();
				this.value = '';
			},
			// 核对成功的弹窗
			onConfirm() {
				
				this.$refs['QSPopup2'].hide();
				setTimeout(function() {
					uni.navigateBack();
				}, 500);
			},
			// 点击取消
			cancel() {
				uni.navigateBack()
			},
			// 点击确认
			async confirm(ref) {
				uni.hideKeyboard();
				if(this.value.length < 6) {
					uni.showToast({
						title: '请输入输入正确的核销码',
						icon:'none'
					});
					setTimeout(() => {
						this.value = '';
					},500)
					return
				};
				let a = await this.$http.scanCode({pullword: this.value});
				if(a.code == 200) {
					this.$refs[ref].show();
				}else{
					this.$refs['QSPopup1'].show();
					this.errMsg = a.message;
				}

			}
		}
	}
</script>

<style lang="scss" scoped>
	@import 'static/css/doenCommon.scss';
</style>
